import { Button, Card, Form, Input, Space } from "antd";
import styles from './index.module.less';
import React from "react";
import { SystemController } from "@/controllers/SystemController";
import { Icon } from "@/components";

/** 登陆 */
export default function Login() {

    const systemController = React.useContext(SystemController.Context);

    const onFinish = React.useCallback(() => {
        systemController.run(async s => {
            s.token = '123'
            sessionStorage.setItem('$_use_token', s.token)
        })
    }, [systemController])

    return (
        <div className={styles.login} >
            <Card title="用户登陆" style={{ width: 300 }}>
                <Form layout='vertical' onFinish={onFinish} >
                    <Form.Item
                        label={<Space><Icon id="I202404131350" /><span>用户名</span></Space>}
                        name="username"
                        initialValue={'admin'}
                        rules={[{ required: true, message: '请输入用户名' }]}
                    >
                        <Input placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        label={<Space><Icon id="I202404131414" /><span>密码</span></Space>}
                        name="password"
                        initialValue={'123'}
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button
                            block
                            htmlType="submit"
                            type="primary"
                            icon={<Icon id="I202404131416" />}
                        >
                            登陆
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}